<template>
  <div>
    <div class="myicon">
      <div class="left_my">
        <i class="iconfont icon-fanhui" @click="prev"></i>
      </div>
      <div class="right_my">
        <i class="iconfont icon-lingdang"></i>
        <i class="iconfont icon-fenxiang"></i>
      </div>
    </div>

    <div class="myclass" v-for="item in classuser" :key="item.id">
      <div class="myimg">
        <img :src="item.user_photo" alt="" />
      </div>
      <div class="myname">
        <div class="name">
          <p>{{ item.user_name }}</p>
          <div class="number">
            <img :src="item.usermedal.icon" alt="" />
            <p>{{ item.usermedal.count_text }}</p>
          </div>
          <div class="mylv">
            <p>LV.{{ item.lvl }}</p>
          </div>
        </div>
        <div class="mydata">
          <p>{{ item.user_guide_text }}</p>
        </div>
      </div>
    </div>

    <div class="autograph">
      <p>厨男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;豆龄&nbsp; 0.2岁</p>
      <p>吃货不是在吃就是在去吃的路上,没时间写签名</p>
    </div>

    <div class="follow">
      <ul>
        <li>
          <p>0</p>
          <p>关注</p>
        </li>
        <li>
          <p>0</p>
          <p>粉丝</p>
        </li>
        <li>
          <p>0</p>
          <p>收藏</p>
        </li>
        <li>
          <p>0</p>
          <p>被学做</p>
        </li>
        <li>
          <p>0</p>
          <p>经验值</p>
        </li>
      </ul>
    </div>

    <div class="iconlists">
      <ul>
        <li>
          <i class="iconfont icon-bijibendiannao"></i>
          <p>创作者中心</p>
        </li>
        <li>
          <i class="iconfont icon-caogaoxiang" style="font-size:28px"></i>
          <p>草稿箱</p>
        </li>
        <li>
          <i class="iconfont icon-sw-f"></i>
          <p>膳食管理</p>
        </li>
        <li>
          <i class="iconfont icon-weibolu" style="font-size:18px"></i>
          <p>厨具管理</p>
        </li>
        <li>
          <i class="iconfont icon-zuijinliulan"></i>
          <p>最近浏览</p>
        </li>
        <li>
          <i class="iconfont icon-shangcheng"></i>
          <p>采购清单</p>
        </li>
        <li>
          <i class="iconfont icon-dingdanliebiao_dianzishu"></i>
          <p>课程.电子书</p>
        </li>
        <li>
          <i class="iconfont icon-qianbao" style="font-size:18px"></i>
          <p>钱包</p>
        </li>
        <li>
          <i class="iconfont icon-youhuijuan"></i>
          <p>优惠卷</p>
        </li>
        <li>
          <i class="iconfont icon-dingdan"></i>
          <p>订单</p>
        </li>
      </ul>
    </div>

    <div class="table">
      <p class="abc">菜谱</p>
      <p>笔记</p>
    </div>

    <div class="release">
      <ul>
        <li class="bbb">
          <p>要发布点内容才能配得上我吃货的名声</p>
          <div class="releaseveget">
            <p>+发布菜谱</p>
          </div>
        </li>
        <li class="ccc">
          <p>发布内容解锁美食日历</p>
          <div class="releasenote">
            <span>+发布笔记</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "../api/my";
export default {
  data() {
    return {
      classuser: [],
    };
  },
  methods: {
    prev() {
      this.$router.go(-1);
    },
  },

  created() {
    getUserInfo().then((data) => {
      this.classuser.push(data.result.user);
      console.log(data);
    });
  },
};
</script>

<style lang="less">
.myicon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 38px;
  .left_my {
    margin-left: 23px;
    i {
      font-size: 22px;
    }
  }
  .right_my {
    margin-right: 24px;
    i {
      margin-left: 20px;
      font-size: 22px;
    }
  }
}

.myclass {
  margin-top: 25px;
  display: flex;
  .myimg {
    margin-left: 24px;
    width: 55px;
    height: 55px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .myname {
    margin-left: 28px;
    .name {
      display: flex;
      align-items: center;
      p {
        font-size: 16px;
        line-height: 16px;
      }
      .number {
        position: relative;
        margin-left: 3px;
        img {
          width: 55px;
          height: 25px;
        }
        p {
          position: absolute;
          font-size: 6px;
          left: 23px;
          top: 6px;
          color: #cbb471;
        }
      }
      .mylv {
        margin-left: 3px;
        p {
          font-size: 6px;
          color: #fdc736;
        }
      }
    }
    .mydata {
      width: 240px;
      border-radius: 20px;
      margin-top: 8px;
      background-color: #ffc533;
      p {
        font-size: 14px;
        line-height: 31px;
        padding: 0 40px;
      }
    }
  }
}

.autograph {
  margin-top: 20px;
  margin-left: 16px;
  p {
    font-size: 12px;
    line-height: 22px;
  }
}

.follow {
  margin-top: 5px;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        font-size: 12px;
        line-height: 24px;
      }
      :nth-child(1) {
        font-weight: bold;
      }
    }
  }
}

.iconlists {
  margin-top: 5px;
  margin-left: 22px;
  margin-right: 28px;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      margin-top: 22px;
      i {
        width: 22px;
        height: 22px;
        font-size: 22px;
        line-height: 22px;
        color: black;
      }
      p {
        font-size: 12px;
        line-height: 30px;
        color: #474747;
      }
    }
  }
}

.table {
  display: flex;
  justify-content: space-evenly;
  p {
    font-size: 15px;
    line-height: 35px;
    color: #8a8a8a;
  }
  .abc {
    border-bottom: 3px solid #ffb90a;
    color: black;
  }
}

.release {
  margin-top: 20px;
  ul {
    .bbb {
      text-align: center;
      display: none;
      p {
        font-size: 14px;
        line-height: 14px;
        color: #929292;
      }
      .releaseveget {
        width: 98px;
        background-color: #ffc533;
        border-radius: 20px;
        position: fixed;
        bottom: 100px;
        left: calc(50% - 49px);
        p {
          font-size: 14px;
          padding: 0 15px;
          line-height: 35px;
          color: black;
        }
      }
    }
    .ccc {
      margin: 0 15px;
      text-align: center;
      height: 350px;
      border: 1px dashed #b3b3b3;
      border-radius: 10px;
      position: relative;
      p {
        margin-top: 125px;
        font-size: 15px;
      }
      .releasenote {
        width: 98px;
        background-color: #ffc533;
        border-radius: 20px;
        position: absolute;
        left: 0;
        right: 0;
        top: 165px;
        margin: auto;
        span {
          font-size: 14px;
          padding: 0 15px;
          line-height: 35px;
          color: black;
        }
      }
    }
  }
}
</style>